import panGestureHandler from '../../../examples/files/gestures/panGestureHandler.tsx'

With the library [`react-native-gesture-hander`](https://github.com/software-mansion/react-native-gesture-handler), we can use the native gesture recognition APIs.

We can use these React components to detect gestures:

- `PanGestureHandler`
- `TapGestureHandler`
- `LongPressGestureHandler`
- `RotationGestureHandler`
- `FlingGestureHandler`
- `PinchGestureHandler`
- `ForceTouchGestureHandler`

---

## States

A gesture is always in one of the following states:

- `UNDETERMINED`
- `BEGAN`
- `ACTIVE`
- `END`
- `CANCELLED`
- `FAILED`

The `onHandlerStateChange` prop is called when the state changes.

---

## Events

Any change in the gesture (e.g. the user moving their finger) will trigger an **event** - we can listen for events with the `onGestureEvent` prop.

PanGestureHandler event metadata includes:

- `x`
- `y`
- `translationX`
- `translationY`
- `velocityX`
- `velocityY`

These can become `Animated.Value`s.

---

## Example

<Example code={panGestureHandler} panes={['editor']} />
